<template>
<div class="contain-body" :style="styleVar">
  <div class="cover"></div>
  <div class="game-info">
    <div class="game-info-item"><span class="info" style="font-size: 30px;line-height: 50px;">{{gameinfo.G_NAME}}</span></div>
    <div class="game-info-item">id：<span class="info">{{ gameinfo.G_ID }}</span></div>
    <div class="game-info-item">介绍：<span class="info">{{gameinfo.G_DESC}}</span></div>
    <div class="game-info-item">评论数：<span class="info">23人</span></div>
  </div>
  <div class="game_cover_change">
    <form action="http://localhost:5000/files/gamecover" method="post" enctype="multipart/form-data" style="font-size: 30px">
      上传封面
      <input type="file" name="file" id="gamefile" value="" multiple="multiple" required/>
      <input v-show="false" type="text" :value="gameinfo.G_ID" name="G_ID" multiple="multiple">
      <input style="background-color: #486478;color: #67bad5;" type="submit" class="upload-button" value="提交"/>
    </form>
    <input style="cursor: pointer;position:absolute;bottom: 50px;right: 60%;width: 100px;height: 50px;background-color: #B04B69;color: #FF247F;" type="button" value="删除游戏" @click="remove">
  </div>
</div>
</template>

<script>
import {delgame} from "../../../api/user";

export default {
  name: "gamecontrolcard",
  props:{
    gameinfo:{
      type:Object
    }
  },
  computed: {
    styleVar() {
      return {
        '--url': `url(${this.gameinfo.G_COVER ? this.gameinfo.G_COVER: 'http://localhost:5000/img/upload.png'})`,
      }
    }
  },
  created() {
    console.log(this.gameinfo)
  },
  methods:{
    remove(){
      const params = {
        gameid: this.gameinfo.G_ID
      }
      delgame(params).then(()=>{
        location.reload()
      })
    }
  }
}
</script>

<style scoped>
.game_cover_change{
  color: white;
  position: relative;
}
.contain-body{
  width: 1500px;
  background-color: #1e3042;
  display: flex;
  margin-top: 10px;
}
.cover{
  width: 300px;
  height: 200px;
  overflow: hidden;
  background-size: 300px;
  background-image: var(--url);
  background-position: center;
  background-repeat: no-repeat;
}
.game-info{
  width: 400px;
  height: 200px;
  color: white;
  padding: 10px;
}
.game-info-item{
  font-size: 23px;
}
.info{
  font-size: 25px;
}
.upload-button{
  width: 80px;
  height: 40px;
}
</style>
